<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml"  
	    xmlns:h="http://java.sun.com/jsf/html"  
	    xmlns:f="http://java.sun.com/jsf/core"  
	    xmlns:p="http://primefaces.org/ui"> 
    
	<h:head>
		<title>A+I Diagrams</title>
		
		<link rel="stylesheet" media="all" href="../../css/style.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		
		<!-- JS -->
		<script src="../../js/jquery-1.6.4.min.js"></script>
		<script src="../../js/css3-mediaqueries.js"></script>
		<script src="../../js/custom.js"></script>
		<script src="../../js/tabs.js"></script>
		<script src="../../js/disableRight-Click.js"></script>
		
		
		<!-- Tweet -->
		<link rel="stylesheet" href="../../css/jquery.tweet.css" media="all"  /> 
		<script src="../../js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="../../css/superfish.css" /> 
		<script  src="../../js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="../../js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="../../js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="../../js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="../../js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="../../js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="../../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="../../js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300' rel='stylesheet' type='text/css'/>
		
		<!-- Flex Slider -->
		<link rel="stylesheet" href="../css/flexslider.css" />
		<script src="../../js/jquery.flexslider-min.js"></script>
		<!-- ENDS Flex Slider -->
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="../../css/lessframework.css"/>
		
		<!-- modernizr -->
		<script src="../../js/modernizr.js"></script>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="../../css/skin.css"/>
		
		<!-- reply move form -->
		<script src="../../js/moveform.js"></script>
		
		
	</h:head >
	
	<h:body >
		<header class="clearfix">
		
			<!-- top widget -->
			<div id="top-widget-holder">
				<div class="wrapper">
					<div id="top-widget">
						<div class="padding">
						<ul  class="widget-cols clearfix">
								<li class="first-col">
									
									<div class="widget-block">
										<h4>Recent posts</h4>
										<div class="recent-post">
											<a href="#" class="thumb"><img src="../../img/dummies/54x54.gif" alt="Post" /></a>
											<div class="post-head">
												<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
											</div>
										</div>
										<div class="recent-post">
											<a href="#" class="thumb"><img src="../../img/dummies/54x54.gif" alt="Post" /></a>
											<div class="post-head">
												<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
											</div>
										</div>
										<div class="recent-post">
											<a href="#" class="thumb"><img src="../../img/dummies/54x54.gif" alt="Post" /></a>
											<div class="post-head">
												<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
											</div>
										</div>
									</div>
								</li>
								
								<li class="second-col">
									
									<div class="widget-block">
										<h4>Dummy text</h4>
										<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies ege. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
										<p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
									</div>
									
								</li>
								
								<li class="third-col">
									
									<div class="widget-block">
										<h4>Dummy text</h4>
										<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies ege. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
										<p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
									</div>
					         		
								</li>
								
								<li class="fourth-col">
									
									<div class="widget-block">
										<h4>Dummy text</h4>
										<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies ege. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
										<p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
									</div>
					         		
								</li>	
							</ul>				
						</div>
					</div>
				</div>
				<a href="#" id="top-open">Menu</a>
			</div>
			<!-- ENDS top-widget -->



			<div class="wrapper">
				<a href="../../index.xhtml" id="logo"><img  src="../../img/logo.png" alt="Zeni"/></a>
				
				<nav>
					<ul id="nav" class="sf-menu">
						<li class="current-menu-item"><a href="../../index.xhtml"><h:outputText value="#{msg['lbl.menu1']}"></h:outputText></a></li>
						<li><a href="#"><h:outputText value="#{msg['lbl.menu2']}"></h:outputText></a>
							<ul>
								<li><a href="../../portfolio/portfolioProjects.xhtml"><h:outputText value="#{msg['lbl.menu2Sub1']}"></h:outputText></a></li>
								<li><a href="../../portfolio/portfolioDiagrams.xhtml"><h:outputText value="#{msg['lbl.menu2Sub2']}"></h:outputText></a></li>
								<li><a href="../../portfolio/portfolioSoftware.xhtml"><h:outputText value="#{msg['lbl.menu2Sub3']}"></h:outputText></a></li>
							</ul>
						</li>
                        <li><a href="../../page.html"><h:outputText value="#{msg['lbl.menu3']}"></h:outputText></a></li>
						<li><a href="../../contact.xhtml"><h:outputText value="#{msg['lbl.menu4']}"></h:outputText></a></li>
					</ul>
					<div id="combo-holder"></div>
				</nav>
				
			</div>
		</header>
		
		
		<!-- MAIN -->
		<div id="main">	
			<div class="wrapper clearfix">
				<h2 class="page-heading"><span><h:outputText value="#{msg['lbl.portfolioMainTitle']}"></h:outputText></span></h2>	
				
				<!-- project content -->
				<div id="project-content" class="clearfix">
					<!-- slider -->
					<div class="project-slider">
				        <div class="flexslider">
						  <ul class="slides">
						    <li>
						      <img src="../../img/slides/diagrams/d01.jpg" alt="alt text" />
						    </li>
						  </ul>
						</div>
					</div>
		        	<!-- ENDS slider -->
		        	
		        	<!-- heading -->
					<div class="project-heading">
						<h2><h:outputText value="#{msg['lbl.portfolioProject1Title']}"></h:outputText></h2>
						<!-- <a href="http://www.thebeaststudio.com/" class="launch">Launch project</a> -->
						<div class="clearfix"></div>
					</div>
					<!-- ENDS heading -->
	        	
	        	
					<div class="project-description">
						<p style="text-align: justify;">
							<h:outputText value="#{msg['lbl.portfolioProject1Description']}" escape="false"></h:outputText>
						</p>
					</div>
					
					<div class="project-info">
						<p>
						<strong><h:outputText value="#{msg['lbl.portfolioProjectDateTitle']}"></h:outputText></strong><br/>
						<h:outputText value="#{msg['lbl.portfolioProject1Date']}"></h:outputText>
						</p>
						<p>
						<strong><h:outputText value="#{msg['lbl.portfolioProjectLocationTitle']}"></h:outputText></strong><br/>
						<h:outputText value="#{msg['lbl.portfolioProject1Location']}"></h:outputText>
						</p>
					</div>
					<div class="clearfix"></div>
					
					<div class="project-pager">
						<a class="previous-project" href="#">&#8592;  <h:outputText value="#{msg['lbl.portfolioProjectPrevLink']}"></h:outputText></a>
						<a class="next-project" href="diagrams2.xhtml"><h:outputText value="#{msg['lbl.portfolioProjectNextLink']}"></h:outputText> &#8594;</a>
					</div>
					
					
					<!-- related -->
					<!--
					<div class="related-projects">
						<div class="related-heading">Related projects</div>
						<div class="related-list">
							<figure>
								<a href="#" class="thumb"><img src="img/dummies/featured-1.jpg" alt="Alt text" /></a>
								<a href="single.html" class="heading">Pellentesque habitant morbi</a>
							</figure>
							
							<figure>
								<a href="#" class="thumb"><img src="img/dummies/featured-2.jpg" alt="Alt text" /></a>
								<a href="single.html" class="heading">Pellentesque habitant morbi</a>
							</figure>
							
							<figure>
								<a href="#" class="thumb"><img src="img/dummies/featured-3.jpg" alt="Alt text" /></a>
								<a href="single.html" class="heading">Pellentesque habitant morbi</a>
							</figure>
							
							<figure class="last">
								<a href="#" class="thumb"><img src="img/dummies/featured-4.jpg" alt="Alt text" /></a>
								<a href="single.html" class="heading">Pellentesque habitant morbi</a>
							</figure>
							
						</div>
						<div class="clearfix"></div>
					</div>
					-->
					<!-- ENDS related -->
					
				</div>	        	
	        	<!--  ENDS project content-->

	        	
			</div>
		</div>
		<!-- ENDS MAIN -->
		
		
		<footer>
			<div class="wrapper">
			
				<ul  class="widget-cols clearfix">
					<li class="first-col">
						
						<div class="widget-block">
							<h4>Recent posts</h4>
							<div class="recent-post">
								<a href="#" class="thumb"><img src="../../img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
							<div class="recent-post">
								<a href="#" class="thumb"><img src="../../img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
							<div class="recent-post">
								<a href="#" class="thumb"><img src="../../img/dummies/54x54.gif" alt="Post" /></a>
								<div class="post-head">
									<a href="#">Pellentesque habitant morbi senectus</a><span> March 12, 2011</span>
								</div>
							</div>
						</div>
					</li>
					
					<li class="second-col">
						
						<div class="widget-block">
							<h4>Zeni Template</h4>
							<p>Hope you find this template useful you are free to use it on personal and commercial projects. See the full license at this <a href="http://luiszuno.com/blog/license" >link</a></p>
						</div>
						
					</li>
					
					<li class="third-col">
						
						<div class="widget-block">
							<div id="tweets" class="footer-col tweet">
		         				<h4>Twitter widget</h4>
		         			</div>
		         		</div>
		         		
					</li>
					
					<li class="fourth-col">
						
						<div class="widget-block">
							<h4>Placeholder images</h4>
							<p>Thanks to <a href="http://www.thebeaststudio.com/" >Moe Pike</a> for sharing his work as place holder images for this preview. Visit his <a href="http://www.thebeaststudio.com/" >website</a> and find more of his awesome work.</p>
						</div>
		         		
					</li>	
				</ul>				
				
				
				<div class="footer-bottom">
					<div class="left">Created by <a href="#" >CPL Systems</a></div>
					<div class="right">
						<ul id="social-bar">
							<li><a href="#"  title="Become a fan" class="poshytip"><img src="../../img/social/facebook.png"  alt="Facebook" /></a></li>
							<li><a href="#" title="Follow my tweets" class="poshytip"><img src="../../img/social/twitter.png"  alt="twitter" /></a></li>
							<li><a href="#"  title="Add to the circle" class="poshytip"><img src="../../img/social/plus.png" alt="Google plus" /></a></li>
						</ul>
					</div>
				</div>
				
			</div>
		</footer>
			
	</h:body>
</html>